<template>
    <div class="my-circle">
        <div
                class="item"
                v-for="(item,index) in angle2labelname"
                :key="index"
                @click="handler(index,$event)"
        >{{item.label}}
        </div>
    </div>
</template>
<script>
    export default {
        name: "myCircle",
        components: {},
        data() {
            return {
                // angle2labelname: [
                //     {
                //         rotate: 0,
                //         label: "数字农牧场管理",
                //         path: "DigitalFarm"
                //     },
                //     {
                //         rotate: -30,
                //         label: "数字乡村管理",
                //         path: "DigitalVillage"
                //     },
                //     {
                //         rotate: -60,
                //         label: "大数据归集共享",
                //         path: "AgriculturalSharing"
                //     },
                //     {
                //         rotate: -90,
                //         label: "智慧党建平台",
                //         path: "SmartBuilding"
                //     },
                //     {
                //         rotate: -120,
                //         label: "农村电商培育",
                //         path: "RuralEcommerceCultivation"
                //     },
                //     {
                //         rotate: -150,
                //         label: "居环境智能检测",
                //         path: "IntelligentDetectionEnvironment"
                //     },
                //     {
                //         rotate: -180,
                //         label: "安全溯源检测",
                //         path: "AgriculturalProductSafety"
                //     },
                //     {
                //         rotate: -210,
                //         label: "农业农村服务",
                //         path: "DigitalAgricultureRuralService"
                //     },
                //     {
                //         rotate: -240,
                //         label: "乡村数字治理",
                //         path: "RuralDigitalGovernance"
                //     },
                // ],
            }
        },
        methods: {
            handler(index, e) {
                // console.log(index)

                // console.log(this.$route)
                if ((this.$route.name == "DigitalFarm" || this.$route.name == "DigitalVillage" || this.$route.name == "AgriculturalSharing" || this.$route.name == "SmartBuilding" || this.$route.name == "RuralEcommerceCultivation" || this.$route.name == "IntelligentDetectionEnvironment")) {
                    // console.log(e)
                    // clientY: 676
                    if (this.rotate >= -60) {
                        if (index == 8) {
                            index = 2
                        } else if (index == 7) {
                            index = 1
                        } else if (index == 6) {
                            index = 0
                        }
                    } else {
                        if (e.pageY < 676) {
                            if (index == 8) {
                                index = 2
                            } else if (index == 7) {
                                index = 1
                            } else if (index == 6) {
                                index = 0
                            }
                        }
                    }


                }

                // console.log(index)
                // console.log(e)
                let path = this.angle2labelname[index].path
                // console.log(path)
                // console.log(this.$route.name)
                if (path != this.$route.name) {
                    this.$router.push({name: path})
                }
            }
        },
        props: {
            rotate: {},
            angle2labelname: {
                type: Array,
                // required: true,
                // default() {
                //     return [{
                //         rotate: 0,
                //         label: "数字农牧场管理平台",
                //         path: "DigitalFarm"
                //     }]
                // }
            }
        }

    }
</script>
<style scoped lang="scss">
    .my-circle {
        // width: 1944px;
        // height: 1944px;
        width: 100%;
        height: 100%;
        background: transparent;
        // border: 1px solid red;
        border-radius: 50%;
        box-sizing: border-box;
        position: relative;

        // 表盘角度初始化
        // transform-origin: 50% 50%;
        // transform: translate(-50%, -300px) rotate(-60deg);

        > div {
            height: 220px;
            width: 100%;
            position: absolute;
            cursor: pointer;
            top: 50%;
            left: 0;
            background: url(../../../assets/image/circle_item.png) 100% 50% no-repeat;
            background-size: 24% 100%;

            display: flex;
            justify-content: flex-end;
            align-items: center;
            @for $i from 1 through 13 {
                &:nth-of-type(#{$i}) {
                    transform-origin: 50% 50%;
                    transform: translateY(-50%) rotate((($i) * 30deg));
                }
            }
        }
    }
</style>
